/**
 * @author truexin
 * @author levy
 */
@import "../mixins";

.finger {
    margin-bottom: .8rem;
    background-color: #fff;
    .code-call {

    }
    //新字体
    .device {
        font-family: 'finger-device' !important;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.091px;

        &::after {
            display: inline-block;
            -webkit-transform: translateX(-22%);
            color: #cfcfcf;
            font-size: .9rem;
            line-height: .52rem;
        }

        //一键开门
        &.one-button-door {
            @include iconAfter('\e68d');
        }

        //密码开门
        &.code-door {
            @include iconAfter('\e6db');
        }

        //扫码
        &.scan-code {
            @include iconAfter('\e6e2');
        }

        //一键呼援
        &.icon-dianhua {
            @import '//at.alicdn.com/t/font_1471756808_3016064.css';
            font-family: "finger-add" !important;
            color: #cfcfcf;
            font-size: .3rem;
            line-height: .5rem;
        }

        //这些是ok的
        &.light0 {
            @include iconAfter('\e680');

            &::after {
                -webkit-transform: translateX(-23%);
            }
        }
        &.light1 { //台灯
            @include iconAfter('\e67b');
        }
        &.light2 { //壁灯
            @include iconAfter('\e67c');
        }
        &.light3 { //吊灯1
            @include iconAfter('\e67d');
        }
        &.light4 { //吊灯2
            @include iconAfter('\e67e');
        }
        &.light5 {
            @include iconAfter('\e681');
        }
        &.light6 {
            @include iconAfter('\e682');
        }
        &.light7 {
            @include iconAfter('\e684');
        }
        &.light8 {
            @include iconAfter('\e685');
        }
        &.light9 {
            @include iconAfter('\e686');
        }
        &.light10 {
            @include iconAfter('\e688');
        }
        &.light11 {
            @include iconAfter('\e689');
        }
        &.light12 {
            @include iconAfter('\e68a');
        }
        &.light13 {
            @include iconAfter('\e68b');
        }
        &.light14 {
            @include iconAfter('\e68c');
        }
        &.light15 {
            @include iconAfter('\e68d');
        }
        &.light16 {
            @include iconAfter('\e68e');
        }
        &.light17 {
            @include iconAfter('\e68f');
        }
        &.light18 {
            @include iconAfter('\e690');
        }
        &.light19 { //场景按钮开关
            @include iconAfter('\e691');
        }
        &.light20 {
            @include iconAfter('\e693');
        }
        &.light21 {
            @include iconAfter('\e694');
        }
        //&.light22 {
        //}

        //这些是需要另外调整的
        //@include iconFontCon('\e67a');
        //@include iconFontCon('\e67f');
        //	@include iconFontCon('\e683');
        //  @include iconFontCon('\e687');
        //  @include iconFontCon('\e692');
        //	@include iconFontCon('\e695');
        //  @include iconAfter('\e696'); // 这个表示很多人
        //	@include iconFontCon('\e697');

    }

    //旧的字体, 其中more是一定有用的.
    .iconfont {
        font-family: 'finger' !important;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.091px;

        &::after {
            display: inline-block;
            -webkit-transform: translateX(-22%);
            color: #cfcfcf;
            font-size: .9rem;
            line-height: .52rem;
        }

        &.top-light {
            @include iconAfter('\e646');

            &::after {
                -webkit-transform: translate(-22%, .02rem);
                font-size: .88rem;
            }
        }

        &.wall-light {
            @include iconAfter('\e647');

            &::after {
                -webkit-transform: translate(-22%, -.02rem);
            }
        }

        &.music {
            @include iconAfter('\e678');

            &::after {
                -webkit-transform: translate(-23%, -.01rem);
            }
        }

        &.air-condition {
            @include iconAfter('\e649');
        }

        &.hall-tv {
            @include iconAfter('\e64a');

            &::after {
                font-size: .88rem;
            }
        }

        &.curtain {
            @include iconAfter('\e64b');

            &.active::after {
                -webkit-transform: translateX(-21%);
            }
        }

        &.off-home {
            @include iconAfter('\e657');

            &::after {
                -webkit-transform: translate(-19%, -.01rem);
                font-size: .8rem;
            }
        }

        &.good-night {
            @include iconAfter('\e64c');
        }

        &.back-home {
            @include iconAfter('\e656');
            &::after {
                -webkit-transform: translateX(-27%);
            }
        }

        &.get-up {
            @include iconAfter('\e64d');
        }

        &.ringing {
            @include iconAfter('\e64e');
        }

        &.door-ring {
            @include iconAfter('\e64f');
        }

        &.community {

        }

        &.news {
        }

        &.password {

        }

        &.comfirm {

        }

        &.more {
            @include iconAfter('\e654');
        }

        &.weather {
        }

        &.dashed-circle::before {
            content: '\e665';
        }
    }

    //add by levy
    //这样就不用加多元素，也不用改变外层的背景色了
    .margin-top::before {
        content: '';
        display: block;
        width: 100%;
        height: .12rem;
        background: #f2f2f2;
    }

    //有时配合margin-top使用
    .split-line {
        display: block;
        width: 100%;
        height: .12rem;
    }

    span,
    div,
    p {
        color: #000;
        font-size: .15rem;
    }

    //组件scss
    .flex-box {
        //由程序计算宽度，阻止自动伸展
        //如果要用自动伸展，请用 .flex-item
        .item {
            -webkit-box-flex: 0;
            -webkit-flex: none;
            flex: none;
            text-align: center;
        }
    }

    .img-text-box {
        display: -webkit-box;
        display: -webkit-flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        height: 1.035rem;
        border-bottom: 1px solid #ddd;

        &:not(:last-child) {
            border-right: 1px solid #ddd;
        }

        .blue {
            color: #355ba6;
        }

        .light-blue {
            color: #3db9e3;
        }

        .orange {
            color: #f2572e;
        }

        .green {
            color: #00be90;
        }

        .img {
            -webkit-box-flex: 0;
            -webkit-flex: none;
            width: .46rem;
            height: .46rem;
            margin: auto .13rem auto .14rem;
        }

        .text {
            width: 40%;
            //height: 50%; //有detail时的样式
            //text-align: left;
        }

        .title {
            font-size: .17rem;
            //margin-bottom: .08rem; //有detail时的样式
            margin: 0;
            @media (min-width: 359px) and (max-width: 361px) {
                font-size: .15rem;
            }
        }

        .detail {
            //TODO 这个可能要使用user-agent了
            //width: 60%; //-webkit-box不能换行
            font-size: .13rem;
        }
    }

    //组件样式end
    &.index {
        .snowball {
            position: fixed;
            top: 46%;
            right: 8%;
            display: block;
            width: .52rem;
            height: .52rem;
            border-radius: 99%;
            background: #03b1be;
            opacity: .3;
            z-index: 99;

            &::after {
                -webkit-transform: translateX(-21%);
                transform: translateX(-21%);
                color: #fff;
            }

            &.active {
                opacity: .7;
            }
        }

        .circle-box {
            position: relative;
            height: 1.05rem;

            .circle {
                position: relative;
                top: 13%;
                margin: auto;
                width: .52rem;
                height: .52rem;
                border: 2px dashed #7fe0c8;
                border-radius: 99%;

                &.active {
                    border: 1px solid #0ca782;
                    background: #0ca782;

                    &::after {
                        color: #fff;
                    }
                }

                &.purple {
                    border-color: #d2a8d1;
                }

                &.purple.active {
                    border-color: #9e449b;
                    background: #9e449b;
                }

            }

            .item-text {
                position: absolute;
                bottom: .11rem;
                left: 0;
                right: 0;
                display: block;
                color: #000;
                @media screen and (max-width: 320px) {
                    font-size: .16rem;
                    font-weight: 300;
                }
                font-size: .14rem;
            }
        }

        .stable {
            height: 2.09rem;

            header {
                font-weight: lighter;
            }

            .flex-item {
                width: 100%;
                height: 100%;
            }
        }

        .shopping {
            position: relative;
            border-right: 1px solid #ddd;
            background: url(../../images/finger/shopping-center.png) no-repeat 50% 85%;
            background-size: 85%;

            header {
                position: relative;
                top: .1rem;
                margin: auto;
                width: .88rem;
                font-size: .3rem;
                @media screen and (max-width: 320px) {
                    color: #00bcd4;
                    font-weight: 400;
                }
                color: #04c8d7;
                background: white;
                z-index: 2;
            }

            p {
                font-size: 0.16rem;
            }

            .purple {
                color: #9e449b;
            }

            .rotate {
                transform: rotate(-45deg);
                position: absolute;
                bottom: 33%;
                left: 10%;
            }

            .box {
                width: 1.6rem;
                height: .5rem;
                font-weight: 300;
                border: 1px solid #ddefdd;
                color: #e44a6e;
                margin: 0 auto .11rem;
                line-height: .6rem;

                //opacity: .7;
            }
        }

        .living {
            height: 50% !important;
            background: url(../../images/finger/living.png) no-repeat 90% 50%;
            background-size: 45%;
        }

        .decoration {
            height: 50% !important;
            background: url(../../images/finger/decoration.png) no-repeat 95% 50%;
            background-size: 45%;
        }

        .living,
        .decoration {
            header {
                font-size: .19rem;
            }

            p {
                margin-left: .07rem;
                margin-bottom: .03rem;
                font-weight: 300;
                font-size: 0.13rem;
            }

        }

        .living {
            text-align: left;

            header {
                margin: .32rem 0 .08rem .27rem;
                @media screen and (max-width: 320px) {
                    color: #259b24;
                    font-weight: 400;
                }
                color: #77d804;
            }

            p {
                margin-left: 0.14rem;
            }

            border-bottom: 1px solid #ddd;
        }

        .decoration {
            text-align: left;

            header {
                margin: .25rem .23rem .1rem .14rem;
                @media screen and (max-width: 320px) {
                    color: #ff6600;
                    font-weight: 400;
                }
                color: #ff9900;
            }

            p {
                margin-left: 0.15rem;
            }

            //不知道叫什么。。。
            .deep-green {
                color: #0ba681;
            }
        }

    }
}

.finger,
.property {
    //add by levy
    //这样就不用加多元素，也不用改变外层的背景色了
    .margin-top::before {
        content: '';
        display: block;
        width: 100%;
        height: .12rem;
        background: #f2f2f2;
    }
}

// activity 活动修改页面背景(中秋)
.home-img{
    min-height: 2.1rem;
}
.slider-activity {
    background: url('../../images/activity/mid-autumn-control.jpg');
    background-size: cover;
    //height: 2.3rem;
    .item-text {
        color: #ffc166 !important;
    }
    .mui-slider-indicator .mui-indicator.mui-active {
        background: #d0239c;
    }
}

.finger.index .shopping.activity-mid-autumn {
    background: url(../../images/activity/shopping-center.jpg) no-repeat 50% 85%;
    background-size: cover;
    header {
        color: #ffc672;
    }
    .box {
        color: #5c5b5b;
    }
}

.lf-android-4-3,.lf-android-4-2,.lf-android-4-1{

    .stable{
        display: block;
        width: 100%;
        overflow: hidden;

        .flex-item{
            display: block;
            float:left;
            width: 50% !important;
            height: 100%;
        }

        .living,.decoration{
            display: block;
            width: 100% !important;
            height: 50% !important;
        }
    }

    .split-line{
        display: none;
    }

    .img-text-box{
        width: 50%;
    }

}

//修改banner没有图片样式
.placeholder{
    height: 2rem !important;
}
.mui-active{
    height: auto !important;
}
.home-img {
    height: 2.3rem;
}